<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/template-web.js" type="text/javascript" charset="utf-8"></script>
		<script id="template" type="text/html">
			<% for(let item of list) {%>
				<li class='mui-table-view-cell'><%= 'item'+item%></li>
			<%}%>
		</script>
		<script type="text/javascript">
			mui.init({
			  pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down : {
			      height:50,
			      auto: false,
			      contentdown : "下拉获取新通知",
			      contentover : "释放立即获取",
			      contentrefresh : "正在获取新通知...",
			      callback :updateInform
			    }
			  }
			})
			var count = 0;
			var targetList = [];
			function updateInform(){
				let informList = document.getElementById('informList');
				targetList.push(count);
				count++;
				let data = {
					list:targetList
				};
				let result = template('template',data);
				informList.innerHTML = result;
				
				mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
			}
		</script>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">通知</h1>
		</header>
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		  <div class="mui-scroll">
		  	<div class="mui-row">
		  		<div class="mui-col-sm-12">
	  			请尝试下拉刷新	
	  		</div>
			</div>
		    <!--数据列表-->
		    
		    <ul id='informList' class="mui-table-view mui-table-view-chevron">
		      
		    </ul>
		  </div>
		</div>
	</body>

</html>